<template>
    <div class="login" v-title="title">
        <pheader :text="this.text1"></pheader>
        <form class="login-form">
            <p class="login-title">手机登录</p>
            <phone v-on:listenToPhone="showMessFromChild"></phone>
            <kapt-sms v-on:listenToSmsCode="showMessFromChild"></kapt-sms>
            <div class="item forget-item blank"></div>
            <div class="item btn1"><p class="form-btn" @click="submit">立即绑定</p></div>
        </form>
        <z-modal :msgs="msg"></z-modal>
        <div class="hintYes" v-if="hintY">
            <div class="hint-top"><i class="iconfont icon-icon_right"></i></div>
            <p>提交成功</p>
        </div>
        <div class="hintNo" v-if="hintN">
            <div class="hint-top"><i class="iconfont icon-wrong"></i></div>
            <p v-if="codeNohas">该兑换码不存在</p>
            <p v-if="codeRe">该兑换码已使用</p>
            <p v-if="codeDi">不可兑换低等级</p>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import phone from '../../component/login/phoneIpt.vue'
    import kaptSms from '../../component/login/kaptSms.vue'
    import {activitySevice} from '../../service/activitySevice'
    import chaKey from '../../component/login/kaptchaKey.vue'
    import smsCode from '../../component/login/sms.vue'
    import {validate} from '../../assets/js/common/validate'
    import {common} from '../../assets/js/common/common'
    import {loginCommon} from '../../assets/js/login/loginCommon'
    import {utility} from '../../assets/js/utility/utility'
    import {loginService} from '../../service/loginService'
    import {commonService} from '../../service/commonService'

    export default {
        components: {"sms-code": smsCode,"phone": phone, "cha-key": chaKey, 'kapt-sms': kaptSms},
        props: [],
        data () {
            // common.pageTitle('手机登录');
            this.$store.state.loginStore.smsType = 2;
            return {
                title: '手机登录',
                msg: {},
                phoneNo: '', //手机号
                codeNo:'',//兑换码
                kaptchaValue: '',
                smsValue: '', //短信验证码
                platform: 'WXH5', //平台
                loginType: '',
                fromPath: window.fromPath,
                text1:'绑定手机号',
                hintY:false,
                hintN:false,
                codeNohas:false,
                codeRe:false,
                codeDi:false,
            }
        },
        mounted: function () {
            let that = this
            that.getPlatForm();
            that.$store.state.loginStore.platform = that.platform;
//            that.codeNo = that.$route.params.code;
//            that.codeNo = '076542899908';
        },
        methods: {
            showMessFromChild (data) {
                let that = this;
                if(data.length > 0){
                    that.pop(data); // 弹框
                }
                //console.log('各个组件传递回来的错误信息', data);

            },
            submit () { //表单提交的方法
                let that = this
                let mess = '';
                // 赋值区域 Begin
                that.phoneNo =that.$store.state.loginStore.phoneNo; //手机号
                that.kaptchaValue =that.$store.state.loginStore.kaptchaValue; //图片验证码
                that.smsValue =that.$store.state.loginStore.messValidate; // 短信验证码
                // 赋值区域 end
                mess = loginCommon.formValidate(1, 1, 1, 0, {phoneNo: that.phoneNo, kaptchaValue: that.kaptchaValue, smsValue: that.smsValue, pwd: that.pwd});
                if(typeof mess != 'undefined') {
                    if(mess.trim('').length > 0){
                        that.pop(mess);
                        return false;
                    }
                }
                else{
                    loginService.bindPhoneLogin({platform: that.platform, phone: that.phoneNo, smsCode: that.smsValue,type:2}).then(function (res) {
                        console.log('vip phone login', res)
                        if(res.data.success){
                            localStorage.token = res.data.datas;
                            let JWT = res.data.datas.split('.');
                            let info = JWT[1];
                            loginService.packageUserInfo(info);
                            // 清空倒计时
                            if(that.$store.state.loginStore.timer > 0){
                                clearInterval(that.$store.state.loginStore.timer)
                            }
                            let codeNo = window.localStorage.getItem('codeId');
                            commonService.getCode({'keyNo':codeNo}).then(function(res){
                                if(res.data.code === 526101 || res.data.code === 524101){
                                    that.hintN = true;
                                    that.codeNohas = true;
                                    setTimeout(function(){
                                        that.$router.replace({name:'code'})
                                    },1000)
                                }
                                if(res.data.code === 526102 || res.data.code === 524102){
                                    that.hintN = true;
                                    that.codeNohas = true;
                                    setTimeout(function(){
                                        that.$router.replace({name:'code'})
                                    },1000)
                                }
                                if(res.data.code === 526103 || res.data.code === 524102){
                                    that.hintN = true;
                                    that.codeRe = true;
                                    setTimeout(function(){
                                        that.$router.replace({name:'code'})
                                    },1000)
                                }
                                if(res.data.code === 526105 || res.data.code === 524105){
                                    that.hintN = true;
                                    that.codeDi = true;
                                    setTimeout(function(){
                                        that.$router.replace({name:'code'})
                                    },1000)
                                }
                                if(res.data.code === 510100){//没有登录
                                    let code = that.$route.params.code
                                    that.$router.replace({name:'vip'})
                                }
                                if(res.data.code === 200){
                                    that.hintY = true;
                                    setTimeout(function(){
                                        that.$router.replace({name:'vip'})
                                    },1000)
                                }
                            })
                        }else{
//                            console.log(res);
                            that.pop(res.data.message)
                        }
                    });
                }
            },
            getPlatForm () {
                let that = this
                let isWx = utility.is_weixin().isWX;
                if(isWx){
                    that.platform = 'WXH5'
                }else{
                    that.platform = 'WAPH5'
                }
            },
            getThirdUrl (loginType) {
                let that = this
                if(loginType === 'qq') {
                    that.loginType = 'QQ'
                }
                if(loginType === 'wx') {
                    that.loginType = 'WEIXIN'
                }
                if(loginType === 'wb') {
                    that.loginType = 'WEIBO'
                }
                loginService.getOauth({loginType: that.loginType, platform: that.platform}).then(function (res) {
//                    console.log('oauth', res);
                    if(res.data.success){
                        window.location.href = res.data.datas;
                    }else {}
                });
            },
            pop (mess) { //弹框的方法
                let that = this
                commonService.autoCloseModal(that, mess, 1);
            },
            goToTarget (path) { //返回登录
                this.$router.replace({path: path})
            }
        },
    }
</script>
<style lang="less">
    @import "../../assets/css/login/login.less";
    .login-title{
        margin-top:1rem;
    }
    .login{
        background:#fff;
        width:100%;
        #purchased{
            width:100%;
        }
        .hintShow{
            font-size: 14px;
            color: #5E6D82;
            line-height: 0.56rem;
        }
        .hintYes{
            width:2.67rem;
            height:2.6rem;
            background:#fff;
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
            border-radius: 4px;
            .hint-top{
                width:100%;
                padding:0.4rem;
                text-align: center;
                box-sizing: border-box;
                i{
                    font-size:30px;
                    color:#13CE66;
                }
            }
            p{
                font-size: 14px;
                color: #475669;
                letter-spacing: 0;
                text-align: center;
            }
        }
        .hintNo{
            width:3.3rem;
            height:2.6rem;
            background:#fff;
            position:fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
            border-radius: 4px;
            opacity: 0;
            animation: show 2s ease 0s;
            .hint-top{
                width:100%;
                padding:0.4rem;
                text-align: center;
                box-sizing: border-box;
                i{
                    font-size:30px;
                    color:#EA5B5B;
                }
            }
            p{
                font-size: 14px;
                color: #475669;
                letter-spacing: 0;
                text-align: center;
            }
        }
        @keyframes show{
            0%{
                -webkit-transform: scale(.1);
                -moz-transform: scale(.1);
                -o-transform: scale(.1);
                -ms-transform: scale(.1);
                transform: scale(.1);
                opacity: 0;
            }
            25%{
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -o-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
            90%{
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -o-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
            100%{
                -webkit-transform: scale(2);
                -moz-transform: scale(2);
                -o-transform: scale(2);
                -ms-transform: scale(2);
                transform: scale(2);
                opacity: 0;
            }
        }
    }
</style>